<template>
  <div class="app-container">
    <!-- 图片素材新增 -->
    <h5 class="titleInfo">基础数据</h5>
    <el-form ref="form"  :rules="rules" :inline="true" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="海报描述">
            <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="分享描述">
            <el-input v-model="form.shareDesc" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属分类">
            <el-select v-model="form.type" placeholder="请选择" clearable>
              <el-option
                v-for="item in typeList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属省份">
            <el-select v-model="form.province" placeholder="请选择" clearable>
              <el-option
                v-for="item in options"
                :key="item.path"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input v-model.number="form.sort" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="封面图">
            <newUpload
              ref="uploadImg"
              :fileNum="fileNum"
              :fileList="fileList"
              :width="-1"
              :height="-1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="海报底图">
            <newUpload
              ref="uploadImg1"
              :fileNum="fileNum"
              :fileList="fileList1"
              :width="-1"
              :height="-1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              active-text="正常"
              inactive-text="下架"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="0"
              :inactive-value="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否推荐">
            <el-switch
              v-model="form.isRecom"
              active-text="推荐"
              inactive-text="不推荐"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 二维码参数 -->
      <div class="divBar" />
      <h5 class="titleInfo">二维码参数</h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="左边距" prop="json.qr.left">
            <el-input v-model.number="form.json.qr.left" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上边距" prop="json.qr.top">
            <el-input v-model.number="form.json.qr.top" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="二维码大小" prop="json.qr.wh">
            <el-input v-model.number="form.json.qr.wh" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="跳转类型" >
            <el-select placeholder="请选择" v-model="form.json.jump.type">
              <el-option
                v-for="item in jumpList"
                :key="item.path"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.json.jump.type==2">
          <el-form-item label="选择项目" prop="json.jump.target">
            <el-select placeholder="请选择" v-model.number="form.json.jump.target" filterable clearable>
              <el-option
                v-for="item in BeautyProjectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.json.jump.type==3">
          <el-form-item label="选择商品" prop="json.jump.target">
            <el-select placeholder="请选择" v-model.number="form.json.jump.target" filterable clearable>
              <el-option
                v-for="item in commodityList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-select :span="24">
          <el-form-item label="跳转类型">
            <el-select placeholder="请选择" v-model="form.json.jumpList">
              <el-option v-for="item in jumpList" :key="item.path" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="医院名称">
            <el-select placeholder="请选择" v-model="form.json.jumpList">
              <el-option v-for="item in jumpList" :key="item.path" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-select placeholder="请选择" v-model="form.json.jumpList">
              <el-option v-for="item in jumpList" :key="item.path" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>-->
      </el-row>
      <!-- 推荐码参数 -->
      <div class="divBar" />
      <h5 class="titleInfo">推荐码参数</h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="左边距" prop="codeJson.left">
            <el-input v-model="form.codeJson.left" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上边距" prop="codeJson.top">
            <el-input v-model="form.codeJson.top" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字体大小" prop="codeJson.size">
            <el-input v-model="form.codeJson.size" type="number" @keyup.native="proving($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字体颜色" prop="codeJson.color">
            <!-- <el-input v-model="form.codeJson.color" /> -->
            <colorPicker v-model="form.codeJson.color" @change="handleChangeColor"></colorPicker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          style="margin-top:30px;margin-left:130px"
          type="primary"
          @click="submitFn('form')"
        >立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import {
  materialPlaceListDetails,
  materialPlaceListEdit,
  materialtypeList,
  ShopGoodsList,
  BeautyProjectList
} from "@/api/materialPlace";
import { regionDropDown } from "@/api/area";
export default {
  name: "MaterialPlaceEdit",
  components: { newUpload },
  filters: {},
  data() {
    var validatePass = (rule, value, callback) => {
        if (!Number(value)) {
            callback(new Error('请输入数字值'));
        } else {
          callback();
        }
      };
    return {
      color: "#000",
      typeList: [],
      fileNum: 1,
      fileList: [],
      fileList1: [],
      options: [],
      form: {
        cate: null,
        sort: null,
        title: "",
        type: null,
        miniUrl: "",
        url: "",
        status: null,
        province: null,
        isRecom: null,
        shareDesc: "",
        json: {
          qr: {
            left: "",
            top: "",
            wh: ""
          },
          // jump: null
          jump: { target: "0", type: "1" },
          // referralCode: { left: "518", top: "970", size: "120", color: "red" },
          // title: "",
          // name: ""
        },
        codeJson: { left: "", top: "", size: "", color: "" }
      },
      jumpList: [
        { value: "1", name: "首页" },
        { value: "2", name: "跳转项目" },
        { value: "3", name: "跳转商品" },
        { value: "4", name: "跳转美分享小程序" },
        { value: "24", name: "跳转PLUS会员" }
      ],
      rules: {
        "codeJson.left": [
          { required: true, message: "请输入左边距", trigger: "blur" },
          // {validator: validatePass, trigger: 'blur'},
          // { required: true, message: '请输入左边距'},
          // { type: 'number', message: '必须为数字值'}
        ],
        "codeJson.top": [
          { required: true, message: "请输入上边距", trigger: "blur" },
          // {validator: validatePass, trigger: 'blur'},
          // { required: true, message: '请输入上边距'},
          // { type: 'number', message: '必须为数字值'}
        ],
        "codeJson.size": [
          { required: true, message: "请输入字体大小", trigger: "blur" },
          // { required: true, message: '请输入字体大小'},
          // { type: 'number', message: '必须为数字值'},
          // {validator: validatePass, trigger: 'blur'},

        ],
        "codeJson.color": [
          { required: true, message: "请输入字体颜色", trigger: "blur" }
        ],
        "json.jump.target": [
          { required: true, message: "请选择", trigger: "change" }
        ],
        sort:[
          { required: true, message: "请输入数字值", trigger: "blur" },
          // {validator: validatePass, trigger: 'blur'},
        ],
        "json.qr.left": [
          { required: true, message: "请输入数字值", trigger: "blur" },
          // {validator: validatePass, trigger: 'blur'},
        ],
        "json.qr.top": [
          { required: true, message: "请输入数字值", trigger: "blur" },
          // {validator: validatePass, trigger: 'blur'},
        ],
        "json.qr.wh": [
          { required: true, message: "请输入数字值", trigger: "blur" },
          // {validator: validatePass, trigger: 'blur'},
        ]
      },
      //项目列表
      BeautyProjectList: [],
      // 商品列表
      commodityList: [],
      AllcommodityList: []
    };
  },
  mounted() {
    this.id =this.$route.query.id-0;
    this.form.id = this.id;
    this.getArea();
    this.getTypeList();
    this.getDetails(this.id);
    this.GetShopGoodsList();
    this.GetBeautyProjectList();
  },
  methods: {
    handleChangeColor (val) {
      console.log('输出颜色值',val)  // 颜色 #6c8198
      this.form.codeJson.color=val
   },
   // 最小数值输入限制
    proving(e) {
      var keynum = window.event ? e.keyCode : e.which // 获取键盘码
      var keychar = String.fromCharCode(keynum) // 获取键盘码对应的字符
      if (keynum == 189 || keynum == 190 || keynum == 109) {
        this.$message.warning('禁止输入小数以及负数')
        e.target.value = ' '
      }
    },
    //获取类型下拉列表
    getTypeList() {
      let datas = {};
      materialtypeList(datas).then(res => {
        this.typeList = res.data.data;
      });
    },
    //获取项目类型下拉列表
    GetBeautyProjectList() {
      BeautyProjectList({ name: this.form.json.name }).then(res => {
        // console.log(res);
        this.BeautyProjectList = res.data.data;
      });
    },
    //获取商品类型下拉列表
    GetShopGoodsList() {
      ShopGoodsList({ title: this.form.json.title }).then(res => {
        console.log(res);
        this.commodityList = res.data.data;
        // this.userFilter()
        // this.addValueOptions()
      });
    },
    // 省市区
    getArea() {
      regionDropDown().then(res => {
        const newArr = [];
        res.data.data.forEach((item1, index) => {
          newArr.push({
            value: item1.id,
            label: item1.name
          });
        });
        this.options = newArr;
      });
    },
    getDetails(id) {
      const datas = { id: id };
      materialPlaceListDetails(datas).then(res => {
        // console.log(res);
        this.form = {...res.data.data};
        // console.log(this.form);
        this.form.json.qr.left=this.form.json.qr.left-0
        
        this.form.json.qr.top=this.form.json.qr.top-0
        this.form.json.qr.wh=this.form.json.qr.wh-0
        this.form.json.jump.target=this.form.json.jump.target
        this.form.codeJson=this.form.codeJson?this.form.codeJson:{ left: "", top: "", size: "", color: "" }
        this.form.codeJson.left=this.form.codeJson.left?this.form.codeJson.left-0:0
        // console.log('left',this.form.codeJson.left)
        this.form.codeJson.top=this.form.codeJson?this.form.codeJson.top-0:0
        this.form.codeJson.size=this.form.codeJson?this.form.codeJson.size-0:0
        if (this.form.miniUrl) {
          this.fileList.push({
            url: localStorage.getItem("imgUrlPrefix") + this.form.miniUrl
          });
          this.$refs.uploadImg.getLength(this.fileList);
        }
        if (this.form.url) {
          this.fileList1.push({
            url: localStorage.getItem("imgUrlPrefix") + this.form.url
          });
          this.$refs.uploadImg1.getLength(this.fileList1);
        }
      });
    },
    // 提交
    submitFn(e) {
      this.$refs[e].validate(valid => {
        this.form.miniUrl = this.$refs.uploadImg.submitUpload();
        this.form.url = this.$refs.uploadImg1.submitUpload();
        this.form.miniUrl = this.form.miniUrl.join(",");
        this.form.url = this.form.url.join(",");
        this.form.json.jump.target=this.form.json.jump.target+""
        
        // if (!this.form.json.qr) {
        //   this.form.json = null;
        // }
        
        if (valid) {
        this.form.json.qr.left=this.form.json.qr.left+""
        this.form.json.qr.top=this.form.json.qr.top+""
        this.form.json.qr.wh=this.form.json.qr.wh+""
        this.form.codeJson.left=this.form.codeJson.left+""
        this.form.codeJson.top=this.form.codeJson.top+""
        this.form.codeJson.size=this.form.codeJson.size+""
        const datas = {...this.form};
        console.log(datas)
          materialPlaceListEdit(datas).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: res.data.msg,
                type: "success"
              });
              this.$router.push({path:"/materialPlaceIndex"});
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          });
        } else {
          this.$message.error("必填项没填，无法提交！");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.m-colorPicker[data-v-11842410] {
    z-index: 1;
}
</style>
